import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { Button, Input, Form } from 'react-vant'
import { logIn } from '../../request'
import { setCurrentUser } from '../../store/modules/conterStore'

const Login = () => {

    const dispatch = useDispatch()
    const navigate = useNavigate()

    const [form] = Form.useForm()
    const onFinish = async values => {
        const { data: { code } } = await logIn(values)
        if (code == 200) {
            // console.log('setCurrentUser',setCurrentUser);
            // console.log('values', values);
            // console.log('setCurrentUser(values)',setCurrentUser(values));
            dispatch(setCurrentUser(values))//将用户登录信息存储到 Redux 的全局状态中
            navigate('/users')
        }
    }


    return (
        <div>
            <Form
                form={form}
                onFinish={onFinish}
                footer={
                    <div style={{ margin: '16px 16px 0' }}>
                        <Button round nativeType='submit' type='primary' block>
                            提交
                        </Button>
                    </div>
                }
            >
                <Form.Item
                    tooltip={{
                        message:
                            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
                    }}
                    intro='确保这是唯一的用户名'
                    rules={[{ required: true, message: '请填写用户名' }]}
                    name='username'
                    label='用户名'
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    rules={[{ required: true, message: '请填写密码' }]}
                    name='password'
                    label='密码'
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;